<template>
    <div v-if="asset">
        <PageTitle v-if="asset">
            <h1><router-link :to="{ name: 'Assets' }">Assets</router-link> <i class="material-icons">chevron_right</i> {{asset.name}}</h1>
        </PageTitle>

        <AssetOverview :asset="asset"></AssetOverview>

        <Expandable name="Details">
            <AssetDetails :asset="asset"></AssetDetails>
        </Expandable>

        <Expandable name="Work Requests">
            <WorkRequests :work-requests="asset.work_requests"></WorkRequests>
        </Expandable>

        <Expandable name="Discussions">
            <Discussions :discussions="asset.discussions"></Discussions>
        </Expandable>

        <Expandable name="Documents">
            <Documents :documents="asset.documents"></Documents>
        </Expandable>

        <Expandable name="Gallery">
            <Gallery :gallery-items="asset.gallery_items"></Gallery>
        </Expandable>

    </div>
</template>
<script>
    import axios from 'axios'
    import dateFormat from 'dateformat'
    import AssetDetails from './AssetDetails.vue'
    import AssetOverview from './AssetOverview.vue'
    import Discussions from './Discussions.vue'
    import Documents from './Documents.vue'
    import Expandable from './Expandable.vue'
    import Gallery from './Gallery.vue'
    import PageTitle from './PageTitle.vue'
    import Panel from './Panel.vue'
    import WorkRequests from './WorkRequests.vue'

    export default {

        components: {
            AssetDetails,
            AssetOverview,
            Discussions,
            Documents,
            Expandable,
            Gallery,
            PageTitle,
            Panel,
            WorkRequests
        },

        data() {
            return {
                asset: null
            }
        },

        methods: {
            fetchData: function() {
                var self = this;

                axios.get(process.env.API_ROOT + '/assets/' + this.$route.params.id, {
                })
                    .then(function(response) {
                        self.asset = response.data;
                    });
            },
        },

        watch: {
            '$route': 'fetchData',

            asset: function(asset) {
                var today = new Date();
                var commissionDate = new Date(asset.commission_date);
                var timeDiff = Math.abs(today.getYear() - commissionDate.getYear());

                asset.age = timeDiff  + ' Years';
                asset.commission_date_text = dateFormat(asset.commission_date, 'm/d/yyyy');

                if(asset.network_meters) {
                    asset.network_meters_text = "Yes"
                } else {
                    asset.network_meters_text = "No"
                }

            }
        },

        created() {
            this.fetchData()
        }

    }
</script>